(function () {
  let data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
    ],
  };
  //点击切换数据和高亮
  $('.caption a').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active');
    // nowIndex获取当前点击的下标;
    //  之所以用nowIndex是因为可以赋值定时器里的nowIndex，点击事件获取nowIndex，定时器获取nowIndex自增，再定时器中调用点击事件，两种共用一个下标。在这个点击事件中点一下改变一次下标和渲染对应下标数据，鼠标移除后，定时器自执行，获取我们点的下标加一再次定时转转转
    nowIndex = $(this).index() - 1; //标签多了个h3，导致index下标异常，所以减一
    //   获取当前点击的下标的data-type值
    let key = $('.caption a').eq(nowIndex).attr('data-type');
    //   改变图的数据
    //   变量用[]语法，不用加引号，加引号和点语法作用一样
    option['series'][0]['data'] = data[key][0];
    option['series'][1]['data'] = data[key][1];
    //重新渲染页面
    myCharts.setOption(option);
  });
  let timer;
  let nowIndex = 0;
  // 定时器封装
  function load() {
    timer = setInterval(function () {
      nowIndex++;
      if (nowIndex === $('.caption a').length) {
        nowIndex = 0;
      }
      // 调用点击事件，定时执行点击事件
      $('.caption a').eq(nowIndex).click();
    }, 1000);
  }
  load();

  $('.sales .inner').hover(
    function () {
      clearInterval(timer);
    },
    function () {
      load();
    }
  );
  let myCharts = echarts.init(document.querySelector('.line'));
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['预期销售额', '实际销售额'],
      textStyle: {
        // 图例上的文字颜色
        color: '#4c9bfd', // 浅蓝色
      },
      left: '25%', // 距离左侧25%
    },
    grid: {
      // 直角坐标系内绘图网格
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
      show: true,
      borderColor: '#012f4a',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      axisTick: {
        // 去掉刻度
        show: false,
      },
      axisLabel: {
        // 文字颜色
        color: '#4c9bfd',
      },
      axisLine: {
        // xAxis轴-垂直线段
        lineStyle: {
          color: '#012f4a',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisTick: {
        // 坐标轴刻度相关设置
        show: false, // 不显示坐标轴刻度
      },
      axisLabel: {
        // 文字颜色
        color: '#4c9bfd',
      },
      axisLine: {
        // y轴-垂直线段
        lineStyle: {
          color: '#012f4a',
        },
      },
      splitLine: {
        //  轴线相关设置
        lineStyle: {
          color: '#012f4a', // 坐标轴线(分割线)的颜色
        },
      },
    },
    series: [
      {
        name: '预期销售额',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#00f2f1', // 线颜色
        },
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      },
      {
        name: '实际销售额',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#ed3f35', // 线颜色
        },
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      },
    ],
  };

  myCharts.setOption(option);
  window.addEventListener('resize', function () {
    myCharts.resize();
  });
})();
